Page({
  data: {
    // 用户水量
    userwater: 160,
    // 画布
    ctx: null,
    // 画布宽高
    width: 0,
    height: 0,
    // 水波速度
    sbspeed: 10,
    isClick: false,
    isShow: false,
    // 彩蛋提示语
    caidan: [
      '有勇气并不表示恐惧不存在，而是敢面对恐惧克服恐惧。',
      ' 自己不曾拥有，却快乐的欣赏别人的拥有，这才是乐观。',
      '不要在忙碌中迷失了自己，在学习之余，欣赏一下生活，会让你的心情像花儿一样绽放。',
      '人生犹如一张清单，你需要的，你不需要的，计算得过于清楚的人通常聪明无比，但却换来的无数的苦恼和叹息。',
      '要实现远大的奋斗目标，就必需能够忍耐得住别人的耻笑，忍耐得住单干的寂寞。'
    ],
    ratext: ''
  },

  onLoad: function (options) {},

  onReady() {
    // 手机屏幕内容宽高，级cavans宽高
    const { windowHeight, windowWidth } = wx.getSystemInfoSync()
    // 得到画布
    this.setData(
      {
        ctx: wx.createCanvasContext('canvas'),
        width: windowWidth,
        height: windowHeight,
      },
      // 回调画图形
      () => {
        const { width, height } = this.data
        // 两个底部起始点
        const begLeft = {
          x: (width - 100) / 2,
          y: height - 200,
        }
        const begRight = {
          x: (width - 100) / 2 + 100,
          y: height - 200,
        }
        // 左边终点
        const endLeft = {
          x: begLeft.x - 50,
          y: begLeft.y - 200,
        }
        // 右边边终点
        const endRight = {
          x: begRight.x + 50,
          y: begRight.y - 200,
        }
        this.createSuiBei(this.data.ctx, begLeft, begRight, endLeft, endRight)
        let h = 0
        let left = {}
        let right = {}
        const { userwater } = this.data
        let intTime = setInterval(() => {
          h = h + 1
          if (h >= userwater) {
            clearInterval(intTime)
            this.setData({
              isClick: true,
            })
            this.createShuiBo(this.data.ctx, left.x + 30, left, right)
            let s = left.x + 30
            let isLeft = true
            const qx = setInterval(() => {
              if (isLeft == true) {
                s = s + this.data.sbspeed
                if (s >= right.x - 30) isLeft = false
              } else {
                s = s - this.data.sbspeed
                if (s <= left.x + 30) isLeft = true
              }
              this.createShuiBo(this.data.ctx, s, left, right)
            }, 150)
            wx.setStorageSync('intt', qx)
          }
          this.createSuiBei(this.data.ctx, begLeft, begRight, endLeft, endRight)
          const { Left, Right } = this.createWater(
            this.data.ctx,
            h,
            begLeft,
            begRight
          )
          left = Left
          right = Right
        }, 15)
      }
    )
  },

  // 画水杯
  createSuiBei(ctx, begLeft, begRight, endLeft, endRight) {
    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.moveTo(begLeft.x, begLeft.y)
    ctx.lineTo(begRight.x, begRight.y)
    ctx.setStrokeStyle('#ACA48F')
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.moveTo(begLeft.x, begLeft.y)
    ctx.lineTo(endLeft.x, endLeft.y)
    ctx.setStrokeStyle('#ACA48F')
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.moveTo(begRight.x, begRight.y)
    ctx.lineTo(endRight.x, endRight.y)
    ctx.setStrokeStyle('#ACA48F')
    ctx.stroke()

    // 刻度
    let h = 40
    for (let i = 0; i < 4; i++) {
      let yy = (h / 200) * 50
      const Left = {
        x: begLeft.x - yy + 10,
        y: begLeft.y - h,
      }
      ctx.beginPath()
      ctx.setLineCap('round')
      ctx.setLineWidth(5)
      ctx.moveTo(Left.x - 15, Left.y)
      ctx.lineTo(Left.x - 20, Left.y)
      ctx.setStrokeStyle('#ACA48F')
      ctx.stroke()
      h = h + 40
    }

    ctx.draw(true)
  },
  // 画水
  createWater(ctx, h, begLeft, begRight) {
    const yy = (h / 200) * 50
    const Left = {
      x: begLeft.x - yy + 10,
      y: begLeft.y - h,
    }
    const Right = {
      x: begRight.x + yy - 10,
      y: begRight.y - h,
    }

    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.moveTo(Left.x, Left.y)
    ctx.lineTo(Right.x, Right.y)
    ctx.setStrokeStyle('#24A9E5')
    ctx.stroke()

    ctx.draw(true)

    return {
      Left,
      Right,
    }
  },
  // 画水波
  createShuiBo(ctx, s, Left, Right) {
    ctx.clearRect(Left.x - 3, Left.y - 6, Right.x - Left.x + 1, 11)
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.moveTo(Left.x, Left.y)
    ctx.quadraticCurveTo(s, Right.y + 20, Right.x, Right.y)
    ctx.setStrokeStyle('#24A9E5')
    ctx.stroke()

    ctx.draw(true)
  },
  // 点击水杯
  ChangWater() {
    if (!this.data.isClick) return
    if (this.data.userwater >= 200) return
    let { userwater } = this.data
    const endwater = userwater + 40
    userwater = userwater - 10
    const intt = wx.getStorageSync('intt')
    // 两个底部起始点
    const { width, height } = this.data
    const begLeft = {
      x: (width - 100) / 2,
      y: height - 200,
    }
    const begRight = {
      x: (width - 100) / 2 + 100,
      y: height - 200,
    }
    // 左边终点
    const endLeft = {
      x: begLeft.x - 50,
      y: begLeft.y - 200,
    }
    // 右边边终点
    const endRight = {
      x: begRight.x + 50,
      y: begRight.y - 200,
    }

    clearInterval(intt)
    let left = {}
    let right = {}
    const wa = setInterval(() => {
      userwater += 1
      if (userwater >= endwater || userwater >= 200) {
        clearInterval(wa)
        if(userwater >= 200) {
          const a = Math.floor(Math.random()*5)
          this.setData({
            ratext: this.data.caidan[a],
            isShow: true,
          })
        }
        this.createShuiBo(this.data.ctx, left.x + 30, left, right)
        let s = left.x + 30
        let isLeft = true
        const qx = setInterval(() => {
          if (isLeft == true) {
            s = s + this.data.sbspeed
            if (s >= right.x - 30) isLeft = false
          } else {
            s = s - this.data.sbspeed
            if (s <= left.x + 30) isLeft = true
          }
          this.createShuiBo(this.data.ctx, s, left, right)
        }, 150)
        wx.setStorageSync('intt', qx)
        this.setData({
          isClick: false
        })
      }
      this.createSuiBei(this.data.ctx, begLeft, begRight, endLeft, endRight)
      const { Left, Right } = this.createWater(
        this.data.ctx,
        userwater,
        begLeft,
        begRight
      )
      left = Left
      right = Right
    }, 20)
  },
})
